<template>
<!-- //首页 -->
  <div id="HomePage">

      <!-- 头部 -->
      <div class="home_top">
          <van-nav-bar title="比朗" left-text="返回" left-arrow
            @click-left="onClickLeft"
             @click-right="onClickRight"
          >
            <template #right>
              <van-icon name="ellipsis" size="18" />
            </template>
          </van-nav-bar>
      </div>

      <div class="content">

      
      <!-- 轮播 -->
      <div class="slideShow">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item><img src="../assets/images/首页/banner_1.png"></van-swipe-item>
            <van-swipe-item><img src="../assets/images/首页/banner_1.png"></van-swipe-item>
            <van-swipe-item><img src="../assets/images/首页/banner_1.png"></van-swipe-item>
            <van-swipe-item><img src="../assets/images/首页/banner_1.png"></van-swipe-item>
          </van-swipe>
      </div>
      <!-- 分类 -->
      <div class="classify">
          <img src="../assets/images/首页/index_01.png">
          <p class='title'>时&nbsp;尚&nbsp;精&nbsp;选</p>
          <p class="letter">Style Collocation</p>
         <router-link to='/FashionChoice'> 
            <img class="arrows" src="../assets/images/首页/back.png">
        </router-link>
      </div>
      <div class="classify">
          <img src="../assets/images/首页/index_02.png">
          <p class='title style_'>潮&nbsp;流&nbsp;资&nbsp;讯</p>
          <p class="letter style_">Fashion Trend</p>
         <router-link to='/Trend_information'> 
           <img class="arrows" src="../assets/images/首页/icon_01.png">
        </router-link>  
      </div>
      <div class="classify">
          <img src="../assets/images/首页/index_03.png">
          <p class='title style_'>限&nbsp;时&nbsp;特&nbsp;惠</p>
          <p class="letter style_">Limited time offer</p>
        <router-link to='/FlashSales'> 
          <img class="arrows" src="../assets/images/首页/icon_01.png">
        </router-link>
      </div>
      <div class="classify note">
          <img src="../assets/images/首页/index_04.png">
          <p class='title style_'>品&nbsp;牌&nbsp;故&nbsp;事</p>
          <p class="letter style_">Brand Story</p>
        <router-link to='/Html_01'> 
          <img class="arrows" src="../assets/images/首页/icon_01.png">
        </router-link>
      </div>



<!-- 滑块 -->

  <div @click="showPopup" lock-scroll=false>
    <img class="nav_button" src="../assets/images/首页/button.png">
  </div>

</div>



<van-popup v-model="show" position="left" :style="{height:'100%',top:'90', background:'#2d3657',width:'77%'}" >
    <div class="user_big">
      <!-- 头像 -->
      <router-link to='/BOUND'>
        <div class='head_photo'>
            <span class="user_photo"><img src="../assets/images/个人中心/pic.png"></span>
            <span class="user_name">vickin</span>
        </div>
      </router-link>
      <div class="cross">
        <img class='shear' src="../assets/images/个人中心/剪刀.png">
      </div> 
      <!-- 分类 -->
      <div class="classify_nav">
        <ul>
          <li>
              <div>
                  <svg t="1606976035817" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="62778" width="100%"><path d="M511.536986 0v54.465715a100.462676 100.462676 0 0 1 65.535982 24.742047c3.51481 4.704864 7.66616 8.883889 12.315673 12.454051l357.043795 390.226922 1.107027 1.134702a33.459883 33.459883 0 0 1-1.605189 45.581826c-5.424431 5.036972-12.592429 7.749187-19.981832 7.527781h-30.969073a54.410364 54.410364 0 0 0-54.327337 54.465715v323.058075c0 30.830694-23.635021 55.877174-52.694472 55.877174H614.130688V670.553765a54.410364 54.410364 0 0 0-54.327337-54.465715H449.737219a54.410364 54.410364 0 0 0-54.327337 54.465715v298.980243H224.872415c-29.059452 0-52.694472-25.04648-52.694472-55.90485V590.598759a54.410364 54.410364 0 0 0-54.327337-54.465715H97.425963a30.415559 30.415559 0 0 1-29.419235-31.910045 29.280857 29.280857 0 0 1 7.859889-21.199562l1.107027-1.134702L438.445546 87.150679a98.608406 98.608406 0 0 1 73.063764-32.657288V0m0 0A153.129472 153.129472 0 0 0 398.537233 50.065284L37.176033 445.024745A83.44214 83.44214 0 0 0 13.845445 504.27835a84.770572 84.770572 0 0 0 83.635869 86.320409h20.147887v323.058075C117.629201 974.432602 165.701836 1023.999723 224.65101 1023.999723h189.439948a35.618585 35.618585 0 0 0 35.701612-36.753287V670.553765h110.093808v316.692671a35.646261 35.646261 0 0 0 34.483883 36.725612l1.217729 0.027675h192.37357c58.949173 0 107.021809-49.567122 107.021809-110.342889V590.598759h31.024424a81.919978 81.919978 0 0 0 58.949173-23.967128 87.814895 87.814895 0 0 0 1.577513-121.496184L625.034901 50.037608a12.287997 12.287997 0 0 1-6.033295-6.503782A154.790012 154.790012 0 0 0 511.730716 0h-0.166054z" p-id="62779" fill="#ffffff"></path></svg>
              </div>
              <router-link to="/">
                <span>首页</span>
              </router-link>
          </li>
          <li>
            <div>
              <svg t="1606967253179" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4071"  width="100%"><path d="M921.088 895.0784c-1.2288 0-1.2288-1.28-1.2288-2.56v-1.2288l-1.1776-7.5776c-15.6672-142.08-104.8064-262.8096-230.144-318.1568 73.5232-51.5584 118.1184-138.3424 118.1184-232.6528C806.656 178.176 684.9536 51.2 536.7296 51.2c-74.7008 0-138.5472 27.648-191.5392 82.9952-51.8144 54.0672-78.336 120.7296-78.336 198.656 0 94.3616 45.7728 181.1456 118.0672 232.704-124.1088 54.0672-210.8416 173.568-230.0928 313.1392C153.6 881.2544 153.6 883.712 153.6 886.272V896.3072c0 20.1216 15.6672 40.2432 38.5536 40.2432 20.48 0 38.5536-18.8928 38.5536-40.2432v-1.2288c20.48-152.2176 138.5472-272.896 289.1776-281.7024 10.8032 1.2288 22.8864 1.2288 33.7408 0 74.7008 3.7376 139.776 32.6656 193.9968 86.7328a313.4464 313.4464 0 0 1 95.1296 194.9696h1.2288v1.2288c0 20.1216 15.6672 40.2432 38.5536 40.2432 20.48 0 38.5536-18.8928 38.5536-40.2432l-1.2288-1.2288h1.2288z m-384.3584-360.96c-104.8064 0-192.768-91.8016-192.768-201.216 0-56.576 19.3024-103.1168 56.6272-142.1312 37.376-38.912 83.1488-59.0848 136.192-59.0848 52.992 0 98.7648 20.1216 136.0896 59.0848 37.376 39.0144 56.6784 85.504 56.6784 142.1312 0 110.6944-86.784 201.216-192.8192 201.216z" p-id="4072" fill="#ffffff"></path></svg>
            </div>
            <router-link to="/PLM">
              <span>我的信息</span>
             </router-link>
          </li>
          <li>
            <div>
              <svg t="1606976088197" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="66106" width="100%"><path d="M699.642 472.688h-375.3c-11.508 0-20.848 10.054-20.848 22.46v11.185c0 12.414 9.34 22.474 20.848 22.474h375.3c11.513 0 20.853-10.072 20.853-22.474v-11.185c0.007-12.406-9.34-22.46-20.853-22.46z m-196.626 202.4H323.448c-11.018 0-19.951 10.105-19.951 22.561v11.357c0 12.451 8.933 22.556 19.951 22.556h179.568c11.017 0 19.951-10.1 19.951-22.556v-11.354c0-12.456-8.934-22.561-19.951-22.561zM885.093 0h-746.2C114.644 0 95 20.908 95 46.7v930.6c0 25.78 19.64 46.7 43.891 46.7H670.06c8.091-1.73 22.407-6.8 37.478-21.83L906.85 796.775s17.3-17.133 22.149-45.641V46.7C928.984 20.908 909.333 0 885.093 0z m-11.14 789.76c-0.029-0.575-0.1-1.139-0.158-1.7l0.158-0.173v1.874z m0-47.052H703.529c-39.133 0-48.794 12.084-48.794 50.462v115.694l-0.015 0.024v58.992H174.167c-13.33 0-24.125-11.49-24.125-25.629V81.774c0-14.174 10.795-25.638 24.125-25.638h675.657c13.33 0 24.129 11.464 24.129 25.638v660.934zM699.642 258.674h-375.3c-11.508 0-20.848 10.1-20.848 22.556v11.349c0 12.451 9.34 22.556 20.848 22.556h375.3c11.513 0 20.853-10.092 20.853-22.556V281.23c0.007-12.453-9.34-22.556-20.853-22.556z m0 0" p-id="66107" fill="#ffffff"></path></svg>
            </div>
          <router-link to="/Orderall">
              <span>我的订单</span>
          </router-link>
          </li>
          <li>
            <div>
              <svg t="1606975091478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35236" width="100%"><path d="M256.180102 228.819452c28.255531 0 51.16224 23.068392 51.16224 51.484581 0 28.444842-22.906709 51.486628-51.16224 51.486628-28.252461 0-51.15917-23.042809-51.15917-51.486628C205.020932 251.887844 227.927641 228.819452 256.180102 228.819452L256.180102 228.819452zM256.180102 228.819452" p-id="35237" fill="#ffffff"></path><path d="M767.815805 228.819452c28.251438 0 51.16224 23.068392 51.16224 51.484581 0 28.444842-22.910802 51.486628-51.16224 51.486628-28.278043 0-51.187823-23.042809-51.187823-51.486628C716.626959 251.887844 739.537761 228.819452 767.815805 228.819452L767.815805 228.819452zM767.815805 228.819452" p-id="35238" fill="#ffffff"></path><path d="M870.136192 975.376583 153.863808 975.376583c-56.458873 0-102.352109-46.193065-102.352109-102.97121L51.511699 151.59565c0-56.779168 45.892213-102.972233 102.352109-102.972233l716.272383 0c56.429197 0 102.352109 46.193065 102.352109 102.972233l0 720.810746C972.487278 929.183518 926.564365 975.376583 870.136192 975.376583L870.136192 975.376583zM153.863808 100.106975c-28.230971 0-51.187823 23.12365-51.187823 51.487651l0 720.810746c0 28.364001 22.956851 51.487651 51.187823 51.487651l716.272383 0c28.226878 0 51.16224-23.124673 51.16224-51.487651L921.298432 151.59565c0-28.364001-22.935362-51.487651-51.16224-51.487651L153.863808 100.107999 153.863808 100.106975zM153.863808 100.106975" p-id="35239" fill="#ffffff"></path><path d="M511.985162 563.470255c-155.156756 0-281.409205-127.009695-281.409205-283.166221 0-14.205537 11.455913-25.743314 25.605168-25.743314 14.127765 0 25.552979 11.537777 25.552979 25.743314 0 127.766942 103.296621 231.683686 230.252081 231.683686s230.251058-103.916744 230.251058-231.683686c0-14.205537 11.449773-25.743314 25.579585-25.743314 14.128789 0 25.578562 11.537777 25.578562 25.743314C793.394367 436.46056 667.140894 563.470255 511.985162 563.470255L511.985162 563.470255zM511.985162 563.470255" p-id="35240" fill="#ffffff"></path></svg>
            </div>
          <router-link to="/SHOPPING">
              <span>我的购物车</span>
          </router-link>
          </li>
          <li>
            <div>
              <svg t="1606975154940" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36060" width="100%"><path d="M981.632 370.88l-216.896-216.896c-5.696-5.696-13.44-8.896-21.568-8.896L643.84 145.088c-14.272 0-26.624 9.856-29.696 23.744C602.944 218.496 564.736 253.12 521.216 253.12c-43.584 0-81.792-34.624-92.928-84.288C425.088 154.944 412.736 145.088 398.528 145.088L272.256 145.088c-8.064 0-15.808 3.2-21.568 8.896l-208.64 208.64C32.32 372.416 27.008 385.664 27.008 400c0 16.704 7.296 33.472 19.904 46.08l90.368 90.432c23.552 23.552 62.464 25.792 83.456 4.864l4.224-4.224-17.792 128.32c0 0.064 0 0.128-0.064 0.192l-18.944 136.128c-0.064 0.448 0.128 0.96 0.064 1.408-1.472 16.064 9.664 30.72 25.792 32.96 16.64 2.368 32.064-9.216 34.432-25.856l18.112-130.24 0.064 0 31.168-224.384c1.792-12.992-4.864-25.664-16.64-31.488C269.376 418.24 255.296 420.608 246.016 429.888L181.504 494.336C181.184 494.144 180.8 493.76 180.416 493.44L89.92 402.944C89.6 402.56 89.28 402.176 89.024 401.856l195.84-195.84 90.944 0c23.808 64.704 80.768 108.032 145.408 108.032 64.576 0 121.536-43.392 145.344-108.032l64 0 204.16 204.16-84.352 84.224-49.664-49.664c-9.28-9.28-23.488-11.52-35.264-5.632-11.712 5.888-18.368 18.688-16.448 31.68l48.192 324.288c-0.448 12.8-5.184 20.672-7.616 22.912l-403.264-2.88c-16.832-0.192-30.592 13.312-30.72 30.208-0.128 15.872 12.032 28.608 27.52 30.144 0.896 0.064 1.664 0.512 2.624 0.512l405.312 2.88 0.256 0c37.504 0 66.88-37.696 66.88-85.824 0-1.472-0.128-3.008-0.32-4.48L822.4 549.888c7.936 4.48 17.024 6.848 26.624 6.848l0 0c16.064 0 32.192-6.848 44.224-18.88l84.8-84.864c12.032-11.904 18.944-28.032 18.944-44.224C997.056 394.304 991.552 380.8 981.632 370.88z" p-id="36061" fill="#ffffff"></path></svg>
            </div>
          <router-link to="/NotSize">
              <span>我的尺寸</span>
          </router-link>
          </li>
          <li>
            <div>
              <svg t="1606975286104" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="44199" width="100%"><path d="M917.7981195 886.0951414H106.2018805c-55.79724117 0-101.44953018-45.652289-101.44953017-101.44953019V239.35438879c0-55.79724117 45.652289-101.44953018 101.44953017-101.44953019h811.596239c55.79724117 0 101.44953018 45.652289 101.44953017 101.44953019v545.29122242c0 55.79724117-45.652289 101.44953018-101.44953017 101.44953019zM106.2018805 188.62962309c-27.89862059 0-50.72476448 22.82614389-50.72476448 50.7247657v545.29122242c0 27.89862059 22.82614389 50.72476448 50.72476448 50.7247657h811.596239c27.89862059 0 50.72476448-22.82614389 50.72476448-50.7247657V239.35438879c0-27.89862059-22.82614389-50.72476448-50.72476448-50.7247657H106.2018805z" fill="#ffffff" p-id="44200"></path><path d="M512 631.83725697c-25.99644182 0-51.99288366-10.14495338-71.64873083-29.80079935L38.35750719 200.04269565c-10.14495338-10.14495338-10.14495338-25.99644182 0-36.14139522 10.14495338-10.14495338 25.99644182-10.14495338 36.1413952 0l401.99376198 401.99376198c19.65584596 19.65584596 51.99288366 19.65584596 71.64873084 0l398.82346404-398.82346404c10.14495338-10.14495338 25.99644182-10.14495338 36.14139522 0 10.14495338 10.14495338 10.14495338 25.99644182 0 36.1413952l-398.82346405 398.82346405c-20.28990555 20.28990555-46.2863486 29.80079935-72.28279042 29.80079935z" fill="#ffffff" p-id="44201"></path></svg>
            </div>
          <router-link to="/MyWallet">
              <span>我的钱包</span>
          </router-link>
          </li>
          <li>
            <div>
              <svg t="1606975390572" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="51592" width="100%"><path d="M959.008 406.016l-308-47.008L512 64 372.992 359.008l-308 47.008 223.008 228-52.992 324L512 805.024l276.992 152.992-52.992-324zM512 740L304 856.992l40-235.008-179.008-182.016 242.016-32 104.992-224 104 224 240.992 34.016L680 622.976l36.992 235.008z" p-id="51593" fill="#ffffff"></path></svg>
            </div>
          <router-link to="/MyCollect">
              <span>我的收藏</span>
          </router-link>
            
          </li>
          <li>
            <div>
              <svg t="1606975889606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="53953" width="100%"><path d="M512 23.253333c205.653333 0 372.352 166.912 372.352 372.821334 0 148.394667-193.536 444.288-301.568 571.818666-17.578667 20.906667-43.52 32.853333-70.784 32.853334a92.416 92.416 0 0 1-70.826667-32.853334C333.226667 840.362667 139.690667 544.469333 139.690667 396.074667 139.648 190.165333 306.346667 23.253333 512 23.253333z m17.493333 899.541334c116.224-137.258667 285.013333-410.666667 285.013334-526.72 0-167.082667-135.68-302.976-302.506667-302.976-166.826667 0-302.506667 135.893333-302.506667 302.933333 0 116.053333 168.789333 389.546667 285.013334 526.762667a22.698667 22.698667 0 0 0 17.493333 8.106666c6.784 0.042667 13.226667-2.944 17.493333-8.106666zM512 210.56a162.901333 162.901333 0 1 1 0 325.802667 162.901333 162.901333 0 0 1 0-325.802667z m0 256a93.184 93.184 0 0 0 93.098667-93.098667A93.184 93.184 0 0 0 512 280.32a93.184 93.184 0 0 0-93.098667 93.098667c0 51.328 41.770667 93.098667 93.098667 93.098666z" p-id="53954" fill="#ffffff"></path></svg>
            </div>
          <router-link to="/Site">
              <span>我的地址</span>
          </router-link>
          
          </li>
          <li class="last">
            <div>
              <svg t="1606975785873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="53008" width="100%"><path d="M845.45641 708.923077c-21.005128 0-39.384615 18.379487-39.384615 39.384615v7.876923c0 57.764103-15.753846 70.892308-78.769231 70.892308h78.769231v-49.887179 52.51282h-630.153846 78.76923c-60.389744 0-76.14359-13.128205-78.76923-60.389743V241.558974v36.758975c0-60.389744 10.502564-76.14359 68.266666-78.769231h483.117949c60.389744 0 76.14359 15.753846 76.14359 70.892308v7.876923c0 21.005128 18.379487 39.384615 39.384615 39.384615s39.384615-18.379487 39.384616-39.384615V196.923077c0-44.635897-34.133333-78.769231-78.769231-78.769231H170.666667c-39.384615 2.625641-70.892308 36.758974-70.892308 78.769231v632.779487c2.625641 42.010256 36.758974 76.14359 78.769231 76.14359H808.697436c44.635897 0 78.769231-34.133333 78.769231-78.769231v-78.769231c-2.625641-23.630769-18.379487-39.384615-42.010257-39.384615zM808.697436 196.923077v52.51282-52.51282h-65.641026 65.641026z m-630.153846 0h23.630769-23.630769z m732.553846 286.194872c-2.625641-2.625641-2.625641-2.625641-5.251282-2.625641l-154.912821-154.912821c-15.753846-15.753846-39.384615-15.753846-55.138461 0-15.753846 15.753846-15.753846 39.384615 0 55.138462L787.692308 472.615385H370.215385c-21.005128 0-39.384615 18.379487-39.384616 39.384615s18.379487 39.384615 39.384616 39.384615H787.692308l-89.271795 89.271795c-15.753846 15.753846-15.753846 42.010256 0 57.764103 15.753846 15.753846 39.384615 15.753846 55.138461 0l152.28718-154.912821c2.625641-2.625641 5.251282-2.625641 5.251282-5.251282 7.876923-7.876923 10.502564-18.379487 10.502564-28.882051 2.625641-7.876923-2.625641-18.379487-10.502564-26.25641z" p-id="53009" fill="#ffffff"></path></svg>
            </div>
          <router-link to="/HeLLO">
              <span>返回</span>
          </router-link>
          
          </li>
        </ul>

      </div>



    </div>  
</van-popup>



    
  </div>
</template>

<script>
export default {
  name: 'HomePage', 
  data () {
    return {
      show: false,
    }
  },
  methods: {
    showPopup() {
      this.show = true;
    },




    // 头部
      onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
    
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' >


// 轮播
.slideShow{
  width: 100%;
  padding-top: 90px;
  box-sizing: border-box;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img{
      width: 100%;
    }
}
// 分类
.classify{
  margin-top: 10px;
  width: 100%;
  border-right: 10px solid #234497;
  position: relative;
  img{
    width: 100%;
  }
  p{
      width: 20%;
      text-overflow:ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: 26px;
  }
  .title{
      position: absolute;
      right: 35px;
      top: 110px;
  }
  .letter{
      position: absolute;
      right: 35px;
      top: 146px;
  }
  .arrows{
      width:30px;
      color: #000;
      position: absolute;
      right: 35px;
      bottom: 28px;
  }
  .style_{
      color: #fff;
  }
}
.note{
  margin-bottom: 10px;
}


// 侧边导航
.nav_button{
  width: 75px;
  border-radius: 50%;
  position:fixed;
  left: 50px;
  bottom: 100px;
}


//个人中心
.user_big{
  width: 100%;
  height:1326px;
  padding-top:90px;
  box-sizing: border-box;
  background:url("../assets/images/个人中心/background.png");
  background-size:100%;
}
.head_photo{
  width: 100%;
  img{
    width: 100px;
    border-radius: 50%;
  }
  .user_name{
    width: 100px;
    color: #fff;
    font-size: 16px;
    margin-left: 20px;
  }
  span{
    margin-left: 40px;
  }
  .user_photo{
    line-height: 160px;
  }
  .user_name{
    line-height: 160px;
  }
}
.cross{
  width: 100%;
  img{
    width: 100%;
    margin-top: -11%;
  }
}
// 侧边导航
.classify_nav{
  width: 100%;
  padding-left: 46px;
  box-sizing: border;
  ul{
    list-style:none;
    height: 100%;
    
    li{
      width: 100%;
      height: 98px;
      color: #fff;
      font-size: 28px;
      line-height: 100px;
      position: relative;
      div{
        width: 6%;
      }
      span{
        margin-left: 26px;
        height: 100%;
        text-indent: 50px;
        line-height: 40px;
        position: absolute;
        top: 26%;
      }
      
    }
    .last{
      margin-top: 9%;
    }
  }
}

</style>
